<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="100">

          <FormItemPanel title="列映射">
            <Button class="float-right" type="primary" size="small" @click="addColumnMappingItem">添加映射</Button>
            <div class="clearfix"></div>
            <div class="m-b-10px"></div>
            <draggable tag="Collapse" :component-data="{attrs: {accordion: true}}" :list="columnMapping" handle=".ivu-collapse-header">
              <Panel :name="$PnUtil.uuid()" v-for="(row, index) in columnMapping" :key="index">
                {{row.columnName ? row.columnName : '未设置列显示名'}}
                <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteColumnMappingItem(index)"><Icon type="md-trash" /></a>
                <div slot="content">
                  <FormItem label="列字段名">
                    <Tooltip content="与数据源中数据项的KEY对应" placement="left">
                      <Input size="small" v-model="row.columnField" placeholder=""/>
                    </Tooltip>
                  </FormItem>
                  <FormItem label="列显示名">
                    <Tooltip content="将用于表头显示名称" placement="left">
                      <Input size="small" v-model="row.columnName" placeholder=""/>
                    </Tooltip>
                  </FormItem>
                  <FormItem label="列宽">
                    <Tooltip content="设置为0时，自动计算宽度，但建议将0设置在映射队列的最后一个映射配置中，要么就全部设置为0" :max-width="200" placement="left">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="row.columnWidth" :active-change="false"></InputNumber>
                    </Tooltip>
                  </FormItem>
                  <FormItem label="文本对齐">
                    <Select :transfer="true" size="small" v-model="row.textAlign">
                      <Option v-for="item in aligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="字号">
                    <InputNumber size="small" :max="1000000" :min="12" v-model="row.fontSize" :active-change="false"></InputNumber>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="row.textColor" alpha recommend/>
                  </FormItem>
                </div>
              </Panel>
            </draggable>
          </FormItemPanel>

          <Collapse value="0">
            <Panel>
              常规配置
              <div slot="content">
                <FormItem label="单页显示行数">
                  <InputNumber size="small" :max="1000000" :min="1" v-model="rowNum" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="轮播方式">
                  <Select :transfer="true" size="small" v-model="carousel">
                    <Option v-for="item in carousels" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="轮播时间间隔">
                  <InputNumber size="small" :max="1000000" :min="1000" :step="100" v-model="waitTime" :active-change="false"></InputNumber> 毫秒
                </FormItem>
                <FormItem label="奇数行背景色">
                  <PnColorPicker size="small" v-model="oddRowBGC" alpha recommend/>
                </FormItem>
                <FormItem label="偶数行背景色">
                  <PnColorPicker size="small" v-model="evenRowBGC" alpha recommend/>
                </FormItem>
                <FormItem label="显示行号">
                  <i-switch v-model="index"></i-switch>
                </FormItem>
                <FormItem label="行号表头文本">
                  <Input size="small" v-model="indexHeader" placeholder=""/>
                </FormItem>
              </div>
            </Panel>
            <Panel>
              表头
              <ShowToggle v-model="showHeader" class="float-right"></ShowToggle>
              <div slot="content">
                <FormItem label="背景色">
                  <PnColorPicker size="small" v-model="headerBGC" alpha recommend/>
                </FormItem>
                <FormItem label="文本色">
                  <PnColorPicker size="small" v-model="headerTextColor" alpha recommend/>
                </FormItem>
                <FormItem label="字号">
                  <InputNumber size="small" :max="1000000" :min="12" v-model="headerFontSize"></InputNumber>
                </FormItem>
                <FormItem label="高度">
                  <InputNumber size="small" :max="1000000" :min="1" v-model="headerHeight"></InputNumber>
                </FormItem>
              </div>
            </Panel>
          </Collapse>

        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="RollTableComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="单元格单击时运行脚本">
            <Alert style="padding: 5px;">此脚本中，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="rowClickHandleScript"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
  import RollTableComp from './RollTableComp'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'RollTableCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        carousels: [
          {
            label: '单行滚动',
            value: 'single'
          },
          {
            label: '整页滚动',
            value: 'page'
          },
        ],
        aligns: [
          {
            label: '左对齐',
            value: 'left'
          },
          {
            label: '居中对齐',
            value: 'center'
          },
          {
            label: '右对齐',
            value: 'right'
          },
        ]
      }
    },
    mounted() {

    },
    methods: {

      addColumnMappingItem () {
        this.columnMapping.push(RollTableComp.buildColumnMappingItem('', '新列'))
      },
      deleteColumnMappingItem (index) {
        this.columnMapping.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        header: 'component.compConfigData.header',
        rowNum: 'component.compConfigData.rowNum',
        showHeader: 'component.compConfigData.showHeader',
        headerBGC: 'component.compConfigData.headerBGC',
        headerTextColor: 'component.compConfigData.headerTextColor',
        headerFontSize: 'component.compConfigData.headerFontSize',
        oddRowBGC: 'component.compConfigData.oddRowBGC',
        evenRowBGC: 'component.compConfigData.evenRowBGC',
        waitTime: 'component.compConfigData.waitTime',
        headerHeight: 'component.compConfigData.headerHeight',
        index: 'component.compConfigData.index',
        indexHeader: 'component.compConfigData.indexHeader',
        carousel: 'component.compConfigData.carousel',

        columnWidth: 'component.compConfigData.columnWidth',
        align: 'component.compConfigData.align',

        rowClickHandleScript: 'component.compConfigData.rowClickHandleScript',

        columnMapping: 'component.compConfigData.columnMapping'

      })
    }
  }
</script>

<style scoped>

</style>
